<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <!-- 引入bootstrap -->
    <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<%--<button  class="btn btn-primary" id="searchEmp" onclick="queryEmp();">查询员工</button>
<button  class="btn btn-success">成功按钮</button>--%>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 pull-right">
            <button class="btn  btn-primary">
                <span class="glyphicon glyphicon-download-alt">导出excel</span>
            </button>
            <button class="btn btn-primary">
                <span class="glyphicon glyphicon-edit">导入excel</span>
            </button>
            <button class="btn btn-primary"  id="createButton">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <!-- 新增按钮的模态框 -->
    <div class="modal fade" id="createEmployee" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th><input type="checkbox" id="selectAll"></th>
                    <th>员工id</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <C:forEach items="${page.list }" var="eachPageInfo">
                    <tr>
                        <th><input type="checkbox" value="${eachPageInfo.id }"></th>
                        <th>${eachPageInfo.id }</th>
                        <th>${eachPageInfo.empName }</th>
                        <th>
                            <c:if test="${eachPageInfo.gender=='1' }">男</c:if>
                            <c:if test="${eachPageInfo.gender=='0' }">女</c:if>
                        </th>
                        <th>${eachPageInfo.email }</th>
                        <th>${eachPageInfo.deptName }</th>
                        <th>
                            <button type="button" class="btn btn-primary btn-sm" aria-label="Left Align">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                            </button>
                            <button type="button" class="btn btn-danger btn-sm" aria-label="Left Align">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true">删除</span>
                            </button>
                        </th>
                    </tr>
                </C:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 显示分页信息 -->
    <div class="row">
        <!-- 分页文字信息-->
        <div class="col-md-6">
            总共<span>${page.total }</span>条纪录
            总共<span>${page.pages }</span>页
            当前页面共<span>${page.size }</span>条纪录数
        </div>
        <!-- 分页条-->
        <div classs="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!-- 如果是第一页，禁用点击首页和上一页的功能 -->
                    <c:choose>
                        <c:when test="${page.pageNum == 1}">
                            <li class="disabled"><a href="#">首页</a></li>
                            <li class="disabled">
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li ><a href="/emp/listAllEmployee.do?pn=1">首页</a></li>
                            <li >
                                <a href="/emp/listAllEmployee.do?pn=${page.pageNum-1 }" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:otherwise>
                    </c:choose>

                    <!-- 高亮当前页 -->
                    <c:forEach items="${page.navigatepageNums }" var="navigatepageNums">
                        <c:choose>
                            <c:when test="${navigatepageNums == page.pageNum }">
                                <li class="active"><a href="#">${navigatepageNums }</a></li>
                            </c:when>
                            <c:otherwise>
                                <li><a href="/emp/listAllEmployee.do?pn=${navigatepageNums }">${navigatepageNums }</a></li>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>

                    <!-- 如果是最后一页，禁用点击和下一页的功能 -->
                    <c:choose>
                        <c:when test="${page.pageNum ==page.pages }">
                            <li class="disabled">
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="disabled"><a href="#">末页</a></li>
                        </c:when>
                        <c:otherwise>
                            <li>
                                <a href="/emp/listAllEmployee.do?pn=${page.pageNum+1 }" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li><a href="/emp/listAllEmployee.do?pn=${page.pages }">末页</a></li>
                        </c:otherwise>
                    </c:choose>

                </ul>
            </nav>
        </div>
    </div>
</div>
<!-- 引入jquery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>

<script>
    function queryEmp(){
        window.location.href="/emp/listAllEmployee.do";
    }
    <!-- 点击新增按钮弹出模态框 -->
    $("#createButton").click(function () {
        $('#createEmployee').modal({
           backdrop:"static"
        });
    });

    <!-- 全选事件 -->
    $("#selectAll").click(function(){

        if($(this).prop("checked")==true){
            $("tbody input[type=checkbox]").prop("checked",true);
        }else{
            $("tbody input[type=checkbox]").prop("checked",false);
        }
    });
</script>
</html>

